<template>
  <view class="proficient">
    <nav-bar title="添加擅长领域"></nav-bar>
    <view class="content-box">
      <view class="al-add-box">
        <view class="al-add-title">
          <view class="al-add-num">已添加（{{ alAddLabel.length }}/5）</view>
          <view class="max-add">最多可添加5个标签</view>
        </view>
        <view class="add-label">
          <view class="add-item" v-for="(item, index) in alAddLabel" :key="index">
            {{ item.tagName }}
            <uni-icons class="clear-icon" type="clear" color="#FF513A" size="18" @click="clickClearLabel(item)"></uni-icons>
          </view>
        </view>
      </view>
      <view class="recommendation">
        <view class="recommendation-title">
          <view class="title">为你推荐</view>
          <!-- <view class="add-btn" @click="addTagDialog = true">点击添加标签</view> -->
        </view>
        <view class="recommendation-label">
          <view
            class="recommendation-item"
            v-for="(item, index) in recommendationLabel"
            :key="index"
            @click="clickTagItem(item)"
          >
            <uni-icons type="plusempty" color="#4B84D4" size="10"></uni-icons>
            {{ item.tagName }}
          </view>
        </view>
      </view>
    </view>
    <you-bottom-btn :btnConfig="bottomBtnConfig" @clickSave="clickSave"></you-bottom-btn>
    <you-popup
      :popupVisible="addTagDialog"
      popupTitle="添加标签"
	    @popupClose="clickCancelAdd"
      @cancel="clickCancelAdd"
      @confirm="clickConfirmAdd"
    >
      <template #popupContent>
        <view class="input-content">
          <uni-easyinput
            v-model="addTagName"
            placeholder="请输入标签名"
          ></uni-easyinput>
        </view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import api_physician from '@/api/physician.js'
  import api_login from '@/api/login.js'
  export default {
    name: 'MyProficient',
    data() {
      return {
        safeHeight: '',
        alAddLabel: [],
        alAddLabelList: [],
        recommendationLabel: [],
        allLabel: [],
        bottomBtnConfig: [
          { text: '保存', class: 'confirm', funcName: 'clickSave' }
        ],
        addTagDialog: false,
        addTagName: '',
        userInfo: null
      }
    },
    onLoad() {
      this.userInfo = uni.getStorageSync('allUserInfo')
      this.alAddLabelList = this.userInfo.professionalArea ? this.userInfo.professionalArea.split(',') : ''
      this.alAddLabel = this.alAddLabelList.map(item => {
        return {
          tagName: item
        }
      })
      this.getTagList()
    },
    methods: {
      getTagList() {
        const params ={
          type: 1 // 擅长领域的标签
        }
        api_physician.fetchTagList(params).then(res => {
          if (res.code !== 200) return
          this.allLabel = res.rows
          this.recommendationLabel  = this.allLabel.filter(lItem => !this.alAddLabelList.includes(lItem.tagName))
        })
      },
      // 移除标签
      clickClearLabel(item) {
        this.alAddLabel = this.alAddLabel.filter(aaItem => aaItem.tagName !== item.tagName)
        this.alAddLabelList = this.alAddLabel.map(aItem => aItem.tagName)
        this.recommendationLabel = this.allLabel.filter(lItem => !this.alAddLabelList.includes(lItem.tagName))
      },
      // 点击添加标签
      clickTagItem(item) {
        this.alAddLabel.push(item)
        this.alAddLabelList = this.alAddLabel.map(aItem => aItem.tagName)
        this.recommendationLabel = this.allLabel.filter(lItem => !this.alAddLabelList.includes(lItem.tagName))
      },
      clickCancelAdd() {
        this.addTagName = ''
        this.addTagDialog = false
      },
      clickConfirmAdd() {
        if (!this.addTagName) {
          uni.showToast({
            title: '请输入标签名',
            icon: 'none'
          })
          return
        }
        const params = {
          type: 1,
          tagName: this.addTagName
        }
        api_physician.addTag(params).then(res => {
          if (res.code !== 200) return
          this.addTagName = ''
          this.addTagDialog = false
          this.getTagList()
        })
      },
      clickSave() {
        const params = {
          professionalArea: this.alAddLabel.map(item => item.tagName).join(',')
        }
        api_physician.updatePhysicianInfo(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '更新成功',
            icon: 'none'
          })
          api_login.fetchUserInfo().then(res => {
            if (res.code !== 200) return
            const userInfo = {
              baUserId: res.baUser.id,
              ...res.baUser,
              ...res.doctorInfo
            }
            uni.setStorageSync('allUserInfo', userInfo)
          })
          uni.reLaunch({
            url: '/pages/physicianMine'
          })
        })
      }
    }
  }
</script>
<style lang="scss">
  .proficient {
    height: 100vh;
    background-color: #F0F3F5;
    .content-box {
      margin: 30rpx;
      padding: 34rpx 0;
      border-radius: 16rpx;
      background-color: #FFF;
      .al-add-box {
        margin-bottom: 60rpx;
        .al-add-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30rpx;
          padding: 0 30rpx;
          .max-add {
            font-size: 24rpx;
            color: #CCC;
          }
        }
        .add-label {
          display: flex;
          flex-wrap: wrap;
          padding: 0 10rpx 0 30rpx;
          .add-item {
            position: relative;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 24rpx;
            margin: 0 20rpx 20rpx 0;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #666;
            background-color: #EEEEEE;
            .clear-icon {
              position: absolute;
              right: -10rpx;
              top: -12rpx;
            }
          }
        }
      }
      .recommendation {
        .recommendation-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 48rpx;
          padding: 0 30rpx;
          .add-btn {
            font-size: 24rpx;
            color: #CCC;
          }
        }
        .recommendation-label {
          display: flex;
          flex-wrap: wrap;
          padding: 0 10rpx 0 30rpx;
          .recommendation-item {
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 20rpx 20rpx 0;
            padding: 0 24rpx;
            border-radius: 30rpx;
            margin: 0 20rpx 20rpx 0;
            color: #4B84D4;
            background-color: rgba(75, 132, 212, 0.1);
          }
        }
      }
    }
  }
  .input-content {
    padding: 0 30rpx 30rpx;
  }
</style>
